<template>
    <Layout>
    <Container :name="articleDetail.title">
      <div class="loading flex grow column" v-show="toLoding || toMore">
        <Loading v-show="toLoding" size="24px" vertical>加载中...</Loading>
        <img
          :src="PIC_URL + '/tlbypcWeb/paidService/wushuju.png'"
          v-show="toMore"
          alt=""
        />
      </div>
      <span class="articleTime">{{ articleDetail.time }}</span>
      <div class="history" v-show="articleList.length > 0">
        <p class="title">
          <img
            :src="PIC_URL + '/tlbypcWeb/paidService/zuoshang.png'"
            class="sub_square sub_square1"
          />
          <img
            :src="PIC_URL + '/tlbypcWeb/paidService/youshang.png'"
            class="sub_square sub_square2"
          />
          <img
            :src="PIC_URL + '/tlbypcWeb/paidService/zuoxia.png'"
            class="sub_square sub_square3"
          />
          <img
            :src="PIC_URL + '/tlbypcWeb/paidService/youxia.png'"
            class="sub_square sub_square4"
          />
          历史回顾
        </p>
        <p
          class="historyList"
          v-for="item in articleList"
          :key="item.articleId"
          @click="showDetail(item)"
          v-show="item.articleId != articleDetail.articleId"
        >
          <img
            :src="PIC_URL + '/tlbypcWeb/paidService/zuoshang.png'"
            class="sub_square sub_square1"
          />
          <img
            :src="PIC_URL + '/tlbypcWeb/paidService/youshang.png'"
            class="sub_square sub_square2"
          />
          <img
            :src="PIC_URL + '/tlbypcWeb/paidService/zuoxia.png'"
            class="sub_square sub_square3"
          />
          <img
            :src="PIC_URL + '/tlbypcWeb/paidService/youxia.png'"
            class="sub_square sub_square4"
          />
          {{ item.formatTime }}
        </p>
      </div>
      <div class="grow detail" ref="detail" v-show="articleList.length > 0">
        <div class="detailBox">
          <div
            class="txt"
            @click="viewImg($event)"
            v-html="articleDetail.detail"
          ></div>
        </div>
      </div>
    </Container>
    <openImg v-bind:imgSrc.sync="imgSrc"></openImg>
    </Layout>
</template>

<script>
import Layout from "@/component/Layout";
import Container from "@/component/Container";
import { imgPath, getUrlParams, isOneMinu } from "../../script/fn";
import format from "date-fns/format";
import { Loading } from "vant";
import openImg from "@/component/openImg";
import behavior from "@/utils/behavior";
import {
  queryArticleStock,
  queryArticleList,
  userClickUpdate,
} from "../../api/api";

const userData = { ...behavior };

export default {
  components: { Layout, Loading, Container, openImg },
  data() {
    return {
      ArticleStock: [],
      articleList: [],
      articleDetail: {
        articleId: "",
        title: "",
        time: "",
        detail: "",
      },
      toLoding: true,
      toMore: false,
      imgSrc: "",
    };
  },
  computed: {},
  mounted() {
    this.queryArticleStock();
  },
  methods: {
    async userClick() {
      const { token } = getUrlParams();
      let openTime = localStorage.getItem("openTime") || 1;
      if (openTime == null) {
        localStorage.setItem("openTime", "1");
      } else {
        localStorage.setItem("openTime", ++openTime);
      }
      userData.module.moduleCode = "0006";
      userData.user.token = token;
      userData.event[0].eventSubject.starttime = Date.now();
      userData.event[0].eventSubject.endtime = "";
      userData.event[0].eventCode = "00029";
      userData.event[0].eventSubject.objectkey = this.articleDetail.articleId;
      userData.event[0].eventSubject.extend.openTime = openTime;
      if (!isOneMinu()) return;
      userClickUpdate(userData).then((back) => {
        if (back.status == 1) {
          let data = back.data;
        }
      });
    },
    queryArticleStock() {
      const productId = localStorage.getItem("productId");
      queryArticleStock({
        productId: getUrlParams().productId || productId,
      }).then((back) => {
        if (back.status == 1) {
          this.ArticleStock = back.data;
          this.queryArticleList();
        }
      });
    },
    queryArticleList() {
      const arr = this.ArticleStock.filter(
        (item) => item.articleTypeName == "操盘攻略"
      );
      let articleTypeId = arr.length != 0 ? arr[0].articleTypeId : "";
      queryArticleList({
        articleType: articleTypeId,
        // articleType: arr[0].articleTypeId,
        // articleType: "41",
        limit: 3,
      }).then((data) => {
        if (data.status == 1) {
          this.toLoding = false;
          if (data.data.length == 0) return (this.toMore = true);
          this.articleList = data.data.map((item) => {
            item.formatTime = format(new Date(item.publishTime), "MM-dd");
            return item;
          });
          this.showDetail(data.data[0]);
        }
      });
    },
    showDetail(data) {
      this.$refs.detail.scrollTop = 0;
      const { formatTime, articleTitle, articleContent, articleId } = data;
      this.articleDetail.time = formatTime;
      this.articleDetail.title = articleTitle;
      this.articleDetail.articleId = articleId;
      // this.articleDetail.detail = articleContent;
      this.articleDetail.detail = imgPath(articleContent);
      this.userClick();
    },
    //查看图片
    viewImg(e) {
      if (e.path[0].tagName == "IMG") {
        this.imgSrc = e.path[0].src;
      }
    },
  },
};
</script>
<style>
.txt img {
  max-width: 100%;
}
.txt p,
.txt p span {
  background: transparent !important;
  color: #3bacdb !important;
  line-height: 30px !important;
  font-size: 18px !important;
}
</style>
<style scoped lang="scss">



.loading {
  justify-content: center;
  align-items: center;
}
.history {
  position: absolute;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  right: 16px;
  color: #3bacdb;
  top: -44px;
  background: #01020d;
  border: 1px solid #0f264e;
  .sub_square {
    position: absolute;
    width: 10px;
    &.sub_square1 {
      top: -1px;
      left: -1px;
    }
    &.sub_square2 {
      top: -1px;
      right: -1px;
    }
    &.sub_square3 {
      bottom: -1px;
      left: -1px;
    }
    &.sub_square4 {
      bottom: -1px;
      right: -1px;
    }
  }
  .title {
    position: relative;
    width: 88px;
    height: 30px;
    background: #01020d;
    border: 1px solid #0f264e;
    cursor: pointer;
    box-shadow: inset 1px 1px 6px rgba(16, 53, 142, 0.72);
    &:hover {
      color: #467aff;
    }
  }
  .historyList {
    box-shadow: inset 1px 1px 6px rgba(16, 53, 142, 0.72);
    margin-top: 7px;
    position: relative;
    display: none;

    cursor: pointer;
    background: #01020d;
    border: 1px solid #0f264e;
    &:hover {
      color: #467aff;
    }
  }
  &:hover {
    .title {
      cursor: auto;
    }
    .historyList {
      display: block;
    }
  }
}
.articleTime {
  position: absolute;
  color: #3bacdb;
  font-size: 16px;
  font-weight: 400;
  top: -38px;
  margin-left: 40px;
}
.detail {
  float: left;
  margin-bottom: 15px;
  overflow-y: auto;
  .detailBox {
    padding: 24px 26px 20px;
    .txt {
      font-size: 18px;
      color: #3bacdb;
      line-height: 28px;
      font-weight: 400;
      text-align: justify;
      word-break: break-all;
    }
  }
}
</style>
